<template>
  <div>
    <div style="width: 100%; height: 100vh; overflow: hidden" class="bgImg">

      <div style="width: 450px; height: 380px; background-color:#EEE0E5; border-radius: 10px;
        margin: 160px 850px;">

        <div style="width: 260px; margin: 0 auto; padding-top: 30px">
          <div class="item" style="font-size: 25px; font-weight: 700; color: #838B8B; margin-bottom: 20px;">WELCOME</div>
          <div class="item">
            <input type="text" class="inputItem" placeholder="请输入用户名" v-model="user.username">
          </div>

          <div class="item">
            <input type="password" class="inputItem" placeholder="请输入密码" v-model="user.password">
          </div>
          <!-- 验证码 -->
          <div class="item" style="text-align: left; display: flex" v-show="count === 3">
            <input type="text" class="inputItem" placeholder="验证码" style="flex: 1;" v-model="code">
            <span @click="refreshCode" style="cursor: pointer; flex: 1;">
              <Identify :identifyCode="identifyCode"></Identify>
             </span>
          </div>

          <div class="item">
            <button class="loginBtn" @click="login">登录</button>
          </div>
          <div style="padding: 20px 0; text-align: right">
            <span style="cursor: pointer; color: forestgreen;font-size: 15px;" @click="preReset">忘记密码</span>
            <span style="cursor: pointer; color: forestgreen;font-size: 15px; margin-left: 10px" @click="goRegister">去注册</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗   -->
    <el-dialog title="忘记密码" :visible.sync="dialogFormVisible" width="30%"
               :close-on-click-modal="false" >
      <el-form :model="reset">
        <el-form-item label="用户名" label-width="150px">
          <el-input v-model="reset.username" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="150px">
          <el-input v-model="reset.phone" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="新密码" label-width="150px">
          <el-input show-password v-model="reset.password" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确认修改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/utils/request";
import {resetRouter} from "@/router";
import Identify from "@/components/common/Identify";


export default {
  name: "Login",
  data() {
    return {
      reset: {},
      dialogFormVisible: false,
      code: '',
      count: 0,
      user: {},
      // 图片验证码
      identifyCode: '',
      // 验证码规则
      identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
    }
  },
  mounted() {
    this.refreshCode()
  },
  components: {Identify},
  methods: {
    goRegister() {
      this.$router.replace("/register")
    },
    preReset() {
      this.dialogFormVisible = true
      this.reset = {}
    },
    save() {
      API.put("/api/user/reset", this.reset).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "修改成功"
          })
          this.dialogFormVisible = false
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length))]
      }
    },
    login() {
      if (!this.user.username) {
        this.$message({
          type: "warning",
          message: "请输入用户名",
          duration:1000
        })
        return;
      }
      if (!this.user.password) {
        this.$message({
          type: "warning",
          message: "请输入密码",
          duration:1000
        })
        return;
      }
      // 登录错三次需要验证码登录
      if (this.count === 3) {
        if (this.code !== this.identifyCode) {
          this.$message({
            type: "error",
            message: "验证码错误",
            duration:1000
          })
          return;
        }
      }

      API.post("/api/user/login", this.user).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "登录成功",
            duration:800
          })
          sessionStorage.setItem("user", JSON.stringify(res.data))
          // 重置路由
          resetRouter(JSON.parse(JSON.stringify(res.data.permission)))

          if (res.data.role.includes(1)) {
            this.$router.replace("/manage/home")
          } else {
            this.$router.replace("/front/home")
          }

        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
          this.count++
        }
      })
    }
  }
}
</script>

<style scoped>
.bgImg {
  background: url("../assets/bg9.jpg") no-repeat;
  background-size: 100% 100vh;
}

.item {
  text-align: center;
  padding: 10px 0
}
.loginBtn {
  background: forestgreen;
  border-radius: 5px;
  color: white;
  width: 100%;
  padding: 10px;
  cursor: pointer
}
.loginBtn:hover{
  box-shadow: 4px 4px 6px 0 rgb(255 255 255 / 50%),
        -4px -4px 6px 0 rgb(116 125 136 / 50%),
        inset -4px -4px 6px 0 rgb(255 255 255 / 20%),
        inset 4px 4px 6px 0 rgb(0 0 0 / 40%);
}

.inputItem {
  width: 100%;
  padding: 10px;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  background-color: #ecf0f3;
  transition: 0.25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}
</style>
